import { Ionicons } from "@expo/vector-icons";
import Slider from "@react-native-community/slider";
import { Text, TouchableOpacity, View } from "react-native";

export default function AudioControls({
  isPlaying,
  onPlayPause,
  position,
  duration,
  onSeek,
}: any) {
  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs < 10 ? "0" : ""}${secs}`;
  };

  return (
    <View
      style={{
        position: "absolute",
        bottom: 36,
        left: 10,
        right: 10,
        paddingVertical: 10,
        paddingHorizontal: 16,
        borderRadius: 20,
        shadowColor: "#000",
        backgroundColor: "white",
      }}
    >
      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <Text
          style={{
            fontSize: 12,
            color: "#666",
          }}
        >
          {formatTime(position)}
        </Text>
        <Slider
          style={{ flex: 1, marginHorizontal: 10 }}
          minimumValue={0}
          maximumValue={duration}
          value={position}
          onSlidingComplete={onSeek}
        />
        <Text
          style={{
            fontSize: 12,
            color: "#666",
          }}
        >
          {formatTime(duration)}
        </Text>
      </View>
      <View
        style={{
          flexDirection: "row",
          marginVertical: 20,
        }}
      >
        <TouchableOpacity
          style={{
            flexDirection: "column",
            alignItems: "center",
            marginHorizontal: 10,
          }}
          onPress={onPlayPause}
        >
          <Ionicons
            name={isPlaying ? "pause" : "play"}
            size={24}
            style={{ marginBottom: 6 }}
          />
          <Text style={{ fontSize: 14 }}>播放</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={{
            flexDirection: "column",
            alignItems: "center",
            marginHorizontal: 10,
          }}
          onPress={onPlayPause}
        >
          <Ionicons name="repeat" size={24} style={{ marginBottom: 6 }} />
          <Text style={{ fontSize: 14 }}>重复</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={{
            flexDirection: "column",
            alignItems: "center",
            marginHorizontal: 10,
          }}
          onPress={onPlayPause}
        >
          <Ionicons name="speedometer" size={24} style={{ marginBottom: 6 }} />
          <Text style={{ fontSize: 14 }}>速度</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}
